<template>
    <div class="container result-page">
        <div ref="realPage" class="real-page">
            <img v-if="imageSrc" class="img-canvas" :src="imageSrc" />
            <footer v-if="imageSrc" class="share-footer">
                <img class="img-qrCode" src="/static/images/qrCode.png" alt="二维码" />
                <div class="right-div">
                    <div class="btns">
                        <div @click="onRestartHandler">再测一次</div>
                        <div @click="onShareHandler">好友分享</div>
                    </div>
                    <p class="tip">长按分享给姐妹、测测TA是哪种粉丝</p>
                </div>

                <div v-show="isShowTips" class="pop-container">长按保存图片</div>
            </footer>
        </div>

        <div ref="page" style="margin-top: 100%">
            <div class="main" :style="styleObject">
                <img class="img-pic" :src="result.pic" />
                <div class="desc-txt">{{result.desc}}</div>
                <img class="img-logo" src="../../assets/images/result/logo.png" />
                <img class="img-name" :src="result.namePic" />

                <div class="info-div" v-html="startDate"></div>

                <footer class="canvas-footer">
                    <img class="img-qrCode" src="/static/images/qrCode.png" alt="二维码" />
                    <div class="right-div">长按二维码<br />进入测试</div>
                </footer>

                <img class="img-love" src="../../assets/images/result/icon_love.png" />
            </div>
        </div>
    </div>
</template>
<script>

import html2canvas from 'html2canvas'
import bgImage from '../../assets/images/result/bg.png'

export default {
    data() {
        return {
            startDate: StartDate,
            score: 0,
            imageSrc: "",
            isShowTips: false,
            result: {},
            styleObject: {
                background: `url(${bgImage}) no-repeat center`,
                backgroundSize: '100%'
            },
        }
    },

    created() {
    },

    mounted() {
        const scale = window.innerHeight / this.$refs.realPage.offsetHeight;
        this.$refs.realPage.style.transform = `scale(${scale})`;

        this.score = this.$route.query.score;
        this.result = getObjByScore(this.score) || {}
        this.$nextTick(()=> {
            setTimeout(() => {
                html2canvas(this.$refs.page, {
                    backgroundColor: '#ffefff',
                // logging: true,
                }).then(canvas => {
                    // this.$refs.page.style.display = "none"
                    this.imageSrc = canvas.toDataURL('image/png');
                })
            }, 500);
        })
    },

    methods: {
        onRestartHandler() {
            this.$router.push("/");
        },

        onShareHandler() {
            this.isShowTips = true;
        }
    }
}
</script>
<style lang="less" scoped>
.result-page {
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;

    .real-page {
        width: 1080px;
        height: 1920px;
        position: relative;
        transform-origin: top;
    }

    img {
        display: block;
    }

    .main {
        width: 100%;
        height: 1920px;
        padding-top: 30px;
        background-color: #ffefff;
        position: relative;


        .img-bg {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .img-pic {
            width: 920px;
            height: 920px;
            margin: 0 auto;
        }

        .desc-txt {
            font-size: 42px;
            color: #000;
            padding: 60px 165px 20px 165px;
            text-align: left;
            height: 270px;
            overflow: hidden;
        }

        .img-logo {
            position: absolute;
            width: 610px;
            top: 830px;
            left: 250px;
        }

        .img-name {
            display: block;
            height: 140px;
            margin: 0 auto;
            margin-top: 16px;
        }

        .info-div {
            width: 776px;
            height: 136px;
            background: url(../../assets/images/result/info_bg.png) no-repeat center;
            background-size: 100%;
            display: flex;
            font-size: 48px;
            color: #000;
            line-height: 58px;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            margin-top: 40px;
        }

        .img-love {
            width: 70px;
            height: 61px;
            margin: 0 auto;
            margin-top: 60px;
            display: block;
        }

        .canvas-footer {
            display: flex;
            padding: 0 160px;
            margin-top: 25px;
            justify-content: center;
            align-items: center;

            .img-qrCode {
                width: 200px;
                height: 200px;
                font-size: 18px;
            }

            .right-div {
                font-size: 42px;
                color: #000;
                text-align: left;
                margin-left: 20px;
            }
        }
    }

    .img-canvas {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .share-footer {
        position: absolute;
        top: 1580px;
        margin: 0 auto;
        left: 160px;
        width: 760px;
        display: flex;
        background-color: #fff;

        .img-qrCode {
            width: 200px;
            height: 200px;
            font-size: 18px;
        }

        .right-div {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 20px 0;

            .btns {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-left: 20px;

                div {
                    width: 256px;
                    height: 87px;;
                    background: url(../../assets/images/result/button_bg.png) no-repeat center;
                    background-size: 100%;
                    font-size: 48px;
                    color: #000;
                    line-height: 87px;
                }
            }

            .tip {
                font-size: 32px;
                color: #000;
                text-align: center;
            }
        }

        .pop-container {
            position: absolute;
            top: -150px;
            right: 100px;
            width: 400px;
            height: 163px;
            background: url(../../assets/images/result/pop_bg.png) no-repeat center;
            background-size: 100%;
            font-size: 48px;
            color: #000;
            padding-top: 40px;
            padding-left: 20px;
        }
    }
}
</style>



